<template>
    <div>
        <el-divider content-position="left">表单配置</el-divider>
        <el-table :data="formData" stripe border>
            <el-table-column prop="name" label="字段名"></el-table-column>
            <el-table-column prop="key" label="字段Key"></el-table-column>
            <el-table-column prop="type" label="列类型"></el-table-column>
            <el-table-column label="操作" min-width="150">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="editform(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteform(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 20px;">
            <el-col :span="24" style="text-align: right;">
                <el-button type="primary" @click="addformColumn">添加筛选项</el-button>
            </el-col>
        </el-row>
        <!-- 筛选项配置对话框 -->
        <el-dialog :visible.sync="formDialogVisible" title="筛选列配置">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="类型" prop="type">
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option v-for="type in formType" :key="type.name" :label="type.name"
                            :value="type.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否必填">
                    <el-switch v-model="form.required"></el-switch>
                </el-form-item>
                <template v-if="['文本框', '下拉框', '时间选择'].includes(form.type)">
                    <el-form-item label="字段Key" prop="key">
                        <el-input v-model="form.key"></el-input>
                    </el-form-item>
                    <el-form-item label="字段名" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </template>
                <template v-if="['下拉框'].includes(form.type)">
                    <el-form-item label="是否多选">
                        <el-switch v-model="form.multiple"></el-switch>
                    </el-form-item>
                    <el-form-item label="枚举数组名">
                        <el-input v-model="form.arrName" placeholder="请输入枚举数组名"></el-input>
                    </el-form-item>
                    <el-form-item label="是否后台请求">
                        <el-switch v-model="form.isRequest"></el-switch>
                    </el-form-item>
                    <el-form-item label="后台请求接口名" v-if="form.isRequest">
                        <el-input v-model="form.apiName"></el-input>
                    </el-form-item>
                    <el-form-item label="枚举IDkey" prop="idKey" v-if="form.isRequest">
                        <el-input v-model="form.idKey" placeholder="请输入枚举IDkey"></el-input>
                    </el-form-item>
                    <el-form-item label="枚举namekey" prop="nameKey" v-if="form.isRequest">
                        <el-input v-model="form.nameKey" placeholder="请输入枚举namekey"></el-input>
                    </el-form-item>
                    <el-form-item label="格式化数据" v-if="!form.isRequest">
                        <el-input type="textarea" :rows="8" v-model="form.data"
                            placeholder="JavaScript 格式化数据"></el-input>
                    </el-form-item>
                </template>
                <template v-if="['时间区间选择'].includes(form.type)">
                    <el-form-item label="开始key" prop="startKey">
                        <el-input v-model="form.startKey"></el-input>
                    </el-form-item>
                    <el-form-item label="结束Key" prop="endKey">
                        <el-input v-model="form.endKey"></el-input>
                    </el-form-item>
                    <el-form-item label="时间数组名" prop="timeName">
                        <el-input v-model="form.timeName"></el-input>
                    </el-form-item>
                </template>
                <el-form-item label="长文本行" prop="rows" v-if="['长文本'].includes(form.type)">
                    <el-input type="number" v-model="form.rows" placeholder="请输入长文本行"></el-input>
                </el-form-item>
                <el-form-item label="宽度">
                    <el-input v-model="form.width" placeholder="请输入列宽度"></el-input>
                </el-form-item>

                <!-- 格式化配置 - 仅对需要格式化的列类型显示 -->
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="formDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveform">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'formConfig',
    components: {},
    props: {
        value: {}
    },
    data() {
        return {
            rules: {
                type: { required: true, message: '请选择类型', trigger: 'change' },
                key: { required: true, message: '请输入字段Key', trigger: 'blur' },
                name: { required: true, message: '请输入字段名', trigger: 'blur' },
                startKey: { required: true, message: '请输入开始key', trigger: 'blur' },
                endKey: { required: true, message: '请输入结束key', trigger: 'blur' },
                timeName: { required: true, message: '请输入时间存储名', trigger: 'blur' },
                idKey: { required: true, message: '请输入枚举IDkey', trigger: 'blur' },
                nameKey: { required: true, message: '请输入枚举namekey', trigger: 'blur' },
                rows: { required: true, message: '请输入长文本行数', trigger: 'blur' },
            },
            formData: [],
            formDialogVisible: false,
            form: {
                key: '',
                name: '',
                type: '',
                data: '',
                multiple: false,
                isRequest: false,
                required: false,
                arrName: '',
                apiName: '',
                nameKey: 'name',
                idKey: 'id',
                width: '',
                startKey: '',
                endKey: '',
                timeName: '',
                rows: ''
            },
            formType: [
                { name: '文本框' },
                { name: '下拉框' },
                { name: '时间选择' },
                { name: '时间区间选择' },
                { name: '长文本' },
                { name: '图片上传' },
                { name: '视频上传' },
                { name: '文件上传' },
                { name: '富文本' },
                { name: '自定义' },
            ],
        }
    },
    watch: {},
    computed: {},
    created() {
        if (this.value) {
            this.formData = this.value
        }
    },
    mounted() { },
    methods: {
        addformColumn() {
            this.form = {
                type: '文本框',
                key: '',
                name: '',
                data: '',
                multiple: false,
                isRequest: false,
                required: false,
                arrName: '',
                apiName: '',
                nameKey: 'name',
                idKey: 'id',
                width: '250',
                startKey: 'start_at',
                endKey: 'end_at',
                timeName: 'timeValue',
                rows: '6'

            };
            this.formDialogVisible = true;
        },

        deleteform(index) {
            this.$confirm('确定删除该列吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.formData.splice(index, 1);
                this.modelValue()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },
        editform(index, row) {
            this.form = Object.assign({}, row);
            this.form.status = true
            this.formDialogVisible = true;
        },

        saveform() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.status) {
                        // 更新现有列
                        this.formData.splice(this.form.index, 1, this.form);
                    } else {
                        // 添加新列
                        this.formData = [...this.formData, Object.assign({}, this.form)].map((item, index) => {
                            return {
                                index,
                                ...item
                            }
                        });
                    }
                    this.modelValue()
                    this.$message({
                        type: 'success',
                        message: '筛选配置保存成功!'
                    });
                    this.formDialogVisible = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        modelValue() {
            this.$emit('change', this.formData)
            this.$emit('input', this.formData)
        }
    },
}
</script>
<style lang="scss" scoped></style>
